<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        //响应式的核心函数（数据劫持）
        function defineReactive(obj, key, value) {
            //对value进行深层次的处理
            observe(value)
            //给对象的每一个属性绑定存取器属性
            Object.defineProperty(obj, key, {
                get: function reactiveGetter() {
                    console.log('收集依赖项');
                    return value
                },
                set: function reactiveSetter(newVal) {
                    console.log('通知依赖项修改');
                    value = newVal
                }
            })
        }



        //对数据开始响应式的操作，将数据传入观察者函数
        function observe(obj) {
            if (typeof obj !== 'object' && obj === null) return
            for (let key of Object.keys(obj)) {
                defineReactive(obj, key, obj[key])
            }
        }

        //初始化的数据
        const vm = {
            _data: {
                name: "lingHua",
                age: 18,
                movieList: [{
                    id: '001',
                    movieName: "肖申克的救赎",
                }, {
                    id: '002',
                    movieName: "盗梦空间"
                }],
                weather: {
                    type: "晴天",
                    temperature: 28
                }
            }
        }
        //调用观察者函数，将我们的数据给到响应式函数，给属性创建数据劫持
        observe(vm._data)
    </script>
</body>

</html>